<template>
	<view class="container flex-xy">
		<view class="w90 mt30"><u-swiper :height='`350`' :list="list" duration="1500" :circular="true" v-if="list.length>0" @click="clickImg"></u-swiper></view>
		<view class="w90 mt30 mb30" v-if="typeList.length>0">
			<text class="fs30 fwbr mr10">品牌电子券</text>
			<text class="fs24 co7e">Brand Vocher</text>
		</view>
		<view class="w90 " style="height: 180rpx;"  v-if="typeList.length>0">
			<scroll-view scroll-x="true" class="h100 w100" style="white-space: nowrap;">
				<view class="oneContainer   bgF radio20  mr30" v-for="(items, i) in typeList" v-bind:key="i" @click="toQuanList(i)">
					<view class="h100 w100 flex-xy"><image :src="items.url" mode="" class="w80 h80"></image></view>
				</view>
			</scroll-view>
		</view>
		<view class="w90 mt30 mb30"><text class="fs30 fwbr mr10">热销电子券</text></view>

		<!-- 热销电子券 -->
		<view class="w100 flex-xy">
			<view class="w90 flex-spc-x  flexw">
				<view class="bgF w48 itemContainer radio20 mb30 " v-for="(items, i) in quanList" v-bind:key="i" @click="toGet(i)">
					<view style="height: 250rpx;" class=" w100 radio20"><image :src="items.images"  class="h100 w100" style="border-radius: 20rpx 20rpx 0 0;"></image></view>

					<view class="w100 flex-xy" style="height: 130rpx;">
						<view class="w90 textOver fs28">{{items.name}}</view>
						<!-- <view class="w90 textOver fs25 co7e">全国84城通用</view> -->
						<view class="w90 textOver fs25 " style="color: #FE9F02;">
							<u-icon class="mr10" name="coupon-fill" size="35"></u-icon>
							<text class="">{{items.price}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="container  mt20 mb20" style="background: #f3f3f3;"><u-divider color="#CCC" bg-color="#f1f1f1">~到底了,宝贝~</u-divider></view>
		</view>

		<!-- 立即兑换 -->
		<u-popup v-model="showDui" mode="center " border-radius="20">
			<view class="w100 h100 flex-xy">
				<view class="bgF radio20 flex-xy" style="height: 500rpx;width: 400rpx;">
					<view class="flex-xy radio50p mt50 mb50" style="width: 150rpx;height: 150rpx;background: #EC1C1C;">
						<u-icon name="coupon-fill" color="#FFFFFF" size="100rpx"></u-icon>
					</view>
					<view @click="toDui" class="w60 coF fs30 radio50 flex-xy mt50 mb20" style="background: #EC1C1C;height: 50rpx;">立即兑换</view>
					<view @click="toNoDui" class=" fs24 co7e mt20">暂不使用</view>
				</view>
			</view>
		</u-popup>
		<!-- 兑换成功 -->
		<u-popup v-model="showDuiSuccess" mode="center " border-radius="20">
			<view class="w100 h100 flex-xy">
				<view class="bgF radio20 " style="height: 500rpx;width: 400rpx;">
					<view class="flex-xy w100" style="height: 200rpx ;background: #78CE4F; border-radius: 20rpx 20rpx 0 0; ">
						<u-icon name="checkmark-circle-fill" color="#FFFFFF" size="100rpx"></u-icon>
					</view>
					<view class=" fs50w w100 flex-xy mt40 mb40">兑换成功</view>
					<view class=" fs24 co7e w100 flex-xy">继续赚取积分，兑换更多奖品</view>

					<view class="w100 flex-xy">
						<view @click="successConfirm" class="w60 coF fs30 radio50 flex-xy mt50 mb20" style="background: #78CE4F;height: 50rpx;">确 认</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 兑换失败 -->
		<u-popup v-model="showDuiFail" mode="center " border-radius="20">
			<view class="w100 h100 flex-xy">
				<view class="bgF radio20 " style="height: 500rpx;width: 400rpx;">
					<view class="flex-xy w100" style="height: 200rpx ;background: #EC1C1C; border-radius: 20rpx 20rpx 0 0; ">
						<u-icon name="close-circle-fill" color="#FFFFFF" size="100rpx"></u-icon>
					</view>
					<view class=" fs50w w100 flex-xy mt40 mb40">兑换失败</view>
					<view class=" fs24 co7e w100 flex-xy"> {{errmsg}}</view>

					<view class="w100 flex-xy">
						<view @click="failConfirm" class="w60 coF fs30 radio50 flex-xy mt50 mb20" style="background: #EC1C1C;height: 50rpx;">确 认</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
var api = require('../../api/api.js');
export default {
	data() {
		return {
			errmsg: " " ,
			
			showDui: false, //展示兑换
			showDuiSuccess: false, //兑换成功
			showDuiFail: false, //兑换失败
			// 轮播图
			list: [
				// {
				// 	image:
				// 		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597925521570&di=765b23e36c3c08e52a7e2a1286f9ff3d&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// },
				// {
				// 	image:
				// 		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597925521570&di=ccf4633149843c667e6b0ecd6df25771&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
				// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// },
				// {
				// 	image:
				// 		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597925521569&di=396c860111daa4cd40f85a52b81b2136&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D583874135%2C70653437%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D3607%26h%3D2408',
				// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// }
			],

			// 电子券
			quanList: [],
			listItem:null,
			//品牌电子券
			typeList:[],
		};
	},
	created() {
	
		this.queryByImg()  //轮播图
	},
	onShow() {
		this.queryByType() //券类型
		
		this.selectAllQuan()  //查询所有券
	},
	methods: {
		// 点击轮播图
		clickImg(e){
			var index= e
			let url = this.list[index].url
			window.location.href = 'https://' + url
		},
		// 轮播图
		queryByImg() {
			uni.request({
				url: api.queryByImg,
				method: 'POST',
				data: {},
				success: res => {
					console.log(res);
					if(res.data.errno == 0){
						let list = res.data.data
						if(list.length>0){
							list.forEach((items,i)=>{
								items.image = items.img
							})
						}
						this.list = list
					}
				}
			});
		},
		// 查询所有券
		selectAllQuan(){
			// this.quanList=[]
			uni.request({
				url: api.selectAllQuan,
				method: 'POST',
				data: {},
				success: res => {
					console.log(res);
					if(res.data.errno == 0){
						
						let list = res.data.data.quanList
						let quanList = []
						
						if(list.length>0){
							list.forEach((items,i)=>{
								if(items.topping==1){
										quanList.push(items)
								}
							})
						}
						
						this.quanList = quanList
					}
				}
			});
		},
		// 券类型
		// POST
		// /wx/auth/queryByType
		queryByType() {
			uni.request({
				url: api.queryByType,
				method: 'POST',
				data: {},
				success: res => {
					console.log(res);
					if(res.data.errno == 0){
						this.typeList = res.data.data
					}
				}
			});
		},
		//
		//跳转到详细券列表
		toQuanList(i) {
			let pid = this.typeList[i].pid
			let imgUrl = this.typeList[i].url
			let name = this.typeList[i].name
			
			if (this.judgeLoading()) {
				uni.navigateTo({
					url: '/pages/allIndex/quanList?pid='+pid + '&name='+name,
					success() {
						uni.setStorageSync('imgUrl',imgUrl)
					},
				});
			} else {
				// 本地没有token  需要跳转到登陆页面
				uni.navigateTo({
					url: '/pages/index/login'
				});
			}
			
			
		},
		// 点击热销电子券
		toGet(i) {
			console.log(this.judgeLoading());
			if (this.judgeLoading()) {
				//本地有token  已经登陆
				this.showDui = true;
				this.listItem = this.quanList[i]
				console.log(this.listItem)
			} else {
				// 本地没有token  需要跳转到登陆页面
				uni.navigateTo({
					url: '/pages/index/login'
				});
			}
		},
		// 立即兑换
		toDui() {
			// this.showDui = false;
			// this.showDuiSuccess = true;
			// this.showDuiFail = false;
			
			let data = {
				id: this.listItem.id,
				price: this.listItem.price,
				desc: uni.getStorageSync('username')
			};
			
			uni.request({
				url: api.Huan,
				method: 'POST',
				data: data,
				success: res => {
					console.log(res);
					if (res.data.errno == 0) {
						this.showDui = false;
						this.showDuiSuccess = true;
						this.showDuiFail = false;
					} else {
						this.showDui = false;
						this.showDuiSuccess = false;
						this.showDuiFail = true;
						
						this.errmsg = res.data.errmsg
					}
				},
				fail() {
					this.showDui = false;
					this.showDuiSuccess = false;
					this.showDuiFail = true;
					this.errmsg = res.data.errmsg
				}
			});
			
			
		},
		// 暂不使用
		toNoDui() {
			this.showDui = false;
			this.showDuiSuccess = false;
			this.showDuiFail = true;
			this.errmsg=" " 
			this.selectAllQuan()  //查询所有券
		},
		// 兑换成功确认
		successConfirm() {
			this.showDui = false;
			this.showDuiSuccess = false;
			this.showDuiFail = false;
			this.selectAllQuan()  //查询所有券
		},
		// 兑换失败确认
		failConfirm() {
			this.showDui = false;
			this.showDuiSuccess = false;
			this.showDuiFail = false;
			this.selectAllQuan()  //查询所有券
		}
	}
};
</script>

<style lang="scss">
.oneContainer {
	height: 180rpx;
	width: 180rpx;
	display: inline-block;
}
.itemContainer {
	height: 380rpx;
}
</style>
